<template>
  <div>
    <a-modal title="物流商事件跟踪" :footer="false" :visible="visible" @before-open="open" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <div>
        <div>承运商：{{ list[0] ? list[0].carrierCode : '' }}</div>
        <div>跟踪号：{{ list[0] ? list[0].trackingNumber : '' }}</div>
      </div>
      <a-scrollbar style="height: 400px; overflow: auto">
        <ul class="list">
          <li class="item clearfix" v-for="item of list">
            <div class="left fl">
              <div class="top">{{ $setTime(item.eventDate) }}</div>
              <div class="bottom">{{ item.eventDescription }}</div>
            </div>
            <div class="right fr">{{ $extract(item, 'eventAddress.country') }} {{ $extract(item, 'eventAddress.state') }} {{ $extract(item, 'eventAddress.city') }}</div>
          </li>
        </ul>
      </a-scrollbar>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['list'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data = reactive({
        loading: false,
      })

      const open = () => {}
      const handleOk = () => {}
      const handleCancel = () => {
        visible.value = false
      }
      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
      }
    },
  })
</script>

<style lang="less" scoped>
  .list {
    margin-top: 10px;
    // padding: 0 10px;
    .item {
      font-size: 12px;
      .left {
      }
      .right {
        line-height: 40px;
      }
    }
    li {
      height: 40px;
      border-bottom: 1px solid #d7d7d7;
    }
  }
</style>
